<template>
  <view>
    <view class="tabbar-box" :style="tabbarBoxStyle">
      <view class="tabbar" v-for="(item,index) in tabbarList" :key="index">
        <view v-if="item.isSwitchTab" class="tabbar-item" @click="to(item)">
		  <image v-if="item.iconPathBg && active !== item.active" :src="item.iconPathBg" class="tabbar-item-iconBg"></image>
          <image :src="active===item.active?item.selectedIconPath:item.iconPath" :class=" item.active === 'circle' && active !== item.active ? 'tabbar-item-icon animation-bounce' : 'tabbar-item-icon'"></image>
          <text :class="active===item.active?'selectedTitle':''">{{ item.title }}</text>
        </view>
        <view v-else class="sendCircle" @click="to(item)">
          <image :src="item.iconPath"></image>
        </view>
      </view>
    </view>
    <view v-show="isSendCircleFixed" :style="sendCircleFixedStyle" class="sendCircle-fixed"></view>
  </view>
</template>
<script>
export default {
  name: "footer-menu",
  data() {
    return {
      menuData: [],
      isCircle: true,
      tabbarBoxStyle: "",
      tabbarList: [
        {
          title: '首页',
          pagePath: '/pages/sindex/index',
          iconPath: "../../static/tabbar/index.png",
          selectedIconPath: "../../static/tabbar/index_active.png",
          isSwitchTab: true,
          active: "sindex"
        },
        {
          title: '发光者',
          pagePath: '/pages/circle/index',
          iconPath: "../../static/tabbar/circle2.png",
          selectedIconPath: "../../static/tabbar/circle2_active.png",
          isSwitchTab: true,
          active: "circle"
        },
        {
          title: '发布说说',
          pagePath: '/pages/circle/circleOfFriends/sendFriends/sendFriends',
          iconPath: "../../static/tabbar/icon_huati.png",
          selectedIconPath: "../../static/tabbar/icon_huati.png",
          isSwitchTab: false,
          active: "sendCircle"
        },
        {
          title: '福利',
          pagePath: '/pages/fuli/index',
          iconPath: "../../static/tabbar/fuli.png",
          selectedIconPath: "../../static/tabbar/fuli_chat_hove.png",
          isSwitchTab: true,
          active: "fuli"
        },
        {
          title: '我的',
          pagePath: '/pages/my/index',
          iconPath: "../../static/tabbar/my.png",
          selectedIconPath: "../../static/tabbar/my_active.png",
          isSwitchTab: true,
          active: "my"
        },
      ],
      sendCircleFixedStyle: "",
      isSendCircleFixed: true
    }
  },
  mounted() {
  },
  props: ["active"],
  methods: {
    getElementHeight() {
      const query = uni.createSelectorQuery().in(this)
      const element = query.select('.tabbar-box').boundingClientRect(data => {
        uni.setStorageSync('footer-menu', data)
        this.sendCircleFixedStyle = `bottom: ${data.height - 65 + 10}px;`
      }).exec()
    },
    getConfig() {
      this.$javaCircle.doRequest("post", "userservice/checkLine", '', '').then(res => {
        this.isCircle = res.data.data === null ? true : res.data.data;
        if (!this.isCircle) {
          this.tabbarList = [
            {
              title: '首页',
              pagePath: '/pages/sindex/index',
              iconPath: "../../static/tabbar/index.png",
              selectedIconPath: "../../static/tabbar/index_active.png",
              isSwitchTab: true,
              active: "sindex"
            },
            {
              title: '发光者',
              pagePath: '/pages/circle/index',
              iconPath: "../../static/tabbar/circle2.png",
			  iconPathBg: "https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/fgzhd/user/circle2_lightMaker_bg.gif",
              selectedIconPath: "../../static/tabbar/circle2_active.png",
              isSwitchTab: true,
              active: "circle"
            },
            {
              title: '发布说说',
              pagePath: '/pages/circle/circleOfFriends/sendFriends/sendFriends',
              iconPath: "../../static/tabbar/icon_huati.png",
              selectedIconPath: "../../static/tabbar/icon_huati.png",
              isSwitchTab: false,
              active: "sendCircle"
            },
            {
              title: '福利',
              pagePath: '/pages/fuli/index',
              iconPath: "../../static/tabbar/fuli.png",
              selectedIconPath: "../../static/tabbar/fuli_chat_hove.png",
              isSwitchTab: true,
              active: "fuli"
            },
            {
              title: '我的',
              pagePath: '/pages/my/index',
              iconPath: "../../static/tabbar/my.png",
              selectedIconPath: "../../static/tabbar/my_active.png",
              isSwitchTab: true,
              active: "my"
            },
          ];
        } else {

          this.tabbarList = [
            {
              title: '首页',
              pagePath: '/pages/sindex/index',
              iconPath: "../../static/tabbar/index.png",
              selectedIconPath: "../../static/tabbar/index_active.png",
              isSwitchTab: true,
              active: "sindex"
            },
            // {title:'康粉圈',pagePath:'/pages/circle/index',iconPath:"../../static/tabbar/circle.png",selectedIconPath:"../../static/tabbar/circle_active.png",isSwitchTab:true,active:"circle"},
            // {title:'发布说说',pagePath:'/pages/circle/circleOfFriends/sendFriends/sendFriends',iconPath:"../../static/tabbar/icon_huati.png",selectedIconPath:"../../static/tabbar/icon_huati.png",isSwitchTab:false,active:"sendCircle"},
            {
              title: '福利',
              pagePath: '/pages/fuli/index',
              iconPath: "../../static/tabbar/fuli.png",
              selectedIconPath: "../../static/tabbar/fuli_chat_hove.png",
              isSwitchTab: true,
              active: "fuli"
            },
            {
              title: '我的',
              pagePath: '/pages/my/index',
              iconPath: "../../static/tabbar/my.png",
              selectedIconPath: "../../static/tabbar/my_active.png",
              isSwitchTab: true,
              active: "my"
            },
          ];
        }
      })
    },
    show() {
      this.tabbarBoxStyle = "bottom:0rpx;"
      this.isSendCircleFixed = true
    },
    hide() {
      this.tabbarBoxStyle = "bottom:-200rpx;"
      this.isSendCircleFixed = false
    },
    to(item) {
      uni.setStorageSync("taskId", false)
      uni.setStorageSync("taskFriendsTime", false)
      uni.setStorageSync('viewVideo', false)
      if (item.isSwitchTab) {
        this.utils.to_switch_tab(item.pagePath)
      } else {
        console.log(item.pagePath);
        uni.navigateTo({url: item.pagePath})
      }

    }
  },
  created() {
    uni.hideTabBar();
    this.getElementHeight()
    this.getConfig()
  }
}
</script>
<style scoped>
.tabbar-box {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #fff;
  z-index: 20;
  box-shadow: 0 2upx 10upx 0 rgba(0, 0, 0, 0.1);
  padding-bottom: env(safe-area-inset-bottom);
  transition: all .2s linear;
//background-color: #fff;
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  font-weight: bold;
  font-weight: 600;
}

.tabbar-item-iconBg {
  position: absolute;
  top: -28upx;
  margin: 0 auto;
  width: 140upx;
  height: 140upx;
}

.tabbar-item-icon {
  position: relative;
  width: 84upx;
  height: 60upx;
  margin-top: 12upx;
  z-index: 2;
}

.animation-bounce {
  animation: bounce 1.2s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(0.8);
  }
}

.tabbar-item text {
  color: #666666;
  font-size: 30upx;
}

.selectedTitle {
  color: #5CAE77 !important;
}

.sendCircle {
  width: 130upx;
  height: 130upx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  margin: 0 auto;
  margin-top: -44upx;
  border-radius: 50%;
}

.sendCircle-fixed {
  position: fixed;
  width: 130upx;
  height: 130upx;
  bottom: 100upx;
  left: 50%;
  transform: translate(-50%, 0%);
  border-radius: 50%;
  box-shadow: 0 2upx 10upx 0 rgba(0, 0, 0, 0.1);
}

.sendCircle image {
  width: 98upx;
  height: 98upx;
}

.tabbar {
  flex: 1;
}
</style>
